<template>
    <page-view class="flex flex-col">
        <van-search background="#F7504D" shape="round" placeholder="请输入关键字" show-action v-model="queryParams.keyword"
          @search="onSearch">
            <template #left>
                <img src="../assets/img/left-arrow.svg" class="mr-[10px]" @click="$router.back()" alt="">
            </template>
            <template #action>
                <div class="text-[14px] text-white" @click="onSearch">搜索</div>
            </template>
        </van-search>
        <div class="content-box flex-1 overflow-auto">
            <van-pull-refresh v-model="isloading" @refresh="onRefresh">
                <van-empty description="暂无数据" v-if="resultData.listData.length == 0"></van-empty>
                <van-list v-model:loading="isloading" loading-text="加载中..." :offset="10"
                  @load="loadNextPage" :finished="queryParams.pageIndex >= resultData.pageCount"
                  class="movie-list px-[10px] box-border grid-box">
                    <div class="movie-item box-border p-[5px]" v-for="item in resultData.listData" :key="item.id">
                        <div class="img-box h-[140px] relative" data-v-3d71734a="">
                            <img :src="baseURL + item.movie_pc" class="w-full h-full object-cover" alt="">
                            <p class="absolute left-[5px] bottom-[5px] text-warningColor font-bold text-[12px]">
                                评分：{{ item.movie_score }}分</p>
                        </div>
                        <p class="text-gray-900 text-[12px] truncate py-[2px] font-bold">{{ item.movie_name }}</p>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>

    </page-view>
</template>
<script setup>
import { ref, reactive, inject } from "vue";
import API from "../utils/API";
let baseURL = inject("baseURL");
const queryParams = reactive({
    pageIndex: 1,
    keyword: ""
})
const resultData = reactive({
    listData: [],
    pageCount: 0,
})
const isloading = ref(false);
const queryData = () => {
    isloading.value = true;
    API.movieInfo.search(queryParams).then(res => {
        resultData.listData = resultData.listData.concat(res.data.listData);
        resultData.pageCount = res.data.pageCount;
    }).finally(() => {
        isloading.value = false;
    });
};
const onRefresh = () => {
    //先把页面变成1
    queryParams.pageIndex = 1;
    //清空数据
    resultData.listData = [];
    queryData();
};
const loadNextPage = () => {
    queryParams.pageIndex++;
    queryData();
    //加载下一页的时候不能替换原来的数据
};
const onSearch = () => {
    queryParams.pageIndex = 1;
    resultData.listData = [];
    queryData();
}
</script>
<style scoped>
.grid-box {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, calc(33.3% - 4px));
    grid-gap: 2px 2px;
    justify-content: center;
}
</style>